<template>
	<el-drawer title="用户详情" v-model="visible" size="1000px" destroy-on-close @closed="$emit('closed')">
		<div style="padding-left: 20px;padding-right: 20px">
			<el-descriptions border>
				<el-descriptions-item label="昵称">{{ userInfo.nickname }}</el-descriptions-item>
				<el-descriptions-item label="消费次数">{{ orderInfo.t_total }}次</el-descriptions-item>
				<el-descriptions-item label="消费金额">{{ orderInfo.t_price }}元</el-descriptions-item>
			</el-descriptions>

			<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick" style="margin-top: 10px">
				<el-tab-pane label="用户订单" name="first">
					<el-table :data="tableData" style="width: 100%">
						<el-table-column label="订单ID" width="200">
							<template #default="scope">
								<p>
									{{ scope.row.order_no }}
									<el-icon :size="16" @click="copyText(scope.row.order_no)" style="cursor: pointer">
										<component :is="copyIcon"/>
									</el-icon>
								</p>
							</template>
						</el-table-column>
						<el-table-column prop="total_num" label="商品数量"/>
						<el-table-column prop="order_price" label="商品总价" />
						<el-table-column prop="pay_price" label="实付金额" />
						<el-table-column prop="status" label="状态" />
						<el-table-column prop="create_time" label="下单时间" width="200"/>
					</el-table>
				</el-tab-pane>
				<el-tab-pane label="用户优惠券" name="second">
					<el-table
						:data="tableData"
						style="width: 100%;">
						<el-table-column
							prop="id"
							width="100px"
							label="ID">
						</el-table-column>
						<el-table-column
							prop="coupon_name"
							label="优惠券名称">
						</el-table-column>
						<el-table-column
							prop="user_name"
							label="获得人">
						</el-table-column>
						<el-table-column
							prop="coupon.amount"
							label="面值">
						</el-table-column>
						<el-table-column
							prop="coupon.threshold_amount"
							label="门槛金额">
						</el-table-column>
						<el-table-column
							prop="coupon.end_time"
							label="有效期">
						</el-table-column>
						<el-table-column
							label="获得方式">
							<template #default="scope">
								<el-tag v-if="scope.row.source == 1" type="success">自己领取</el-tag>
								<el-tag v-if="scope.row.source == 2" type="danger">商家赠送</el-tag>
							</template>
						</el-table-column>
						<el-table-column
							prop="status"
							label="状态">
							<template #default="scope">
								<el-tag v-if="scope.row.status == 1" type="success">未使用</el-tag>
								<el-tag v-if="scope.row.status == 2" type="danger">已使用</el-tag>
								<el-tag v-if="scope.row.status == 3">已过期</el-tag>
							</template>
						</el-table-column>
						<el-table-column
							width="150"
							prop="used_time"
							label="使用日期">
						</el-table-column>
					</el-table>
				</el-tab-pane>

				<Pages :form="searchForm" :page-obj="page" @pageChange="pageChangeHandle" @pageJump="getDetail"></Pages>
			</el-tabs>
		</div>
	</el-drawer>
</template>

<script>

import Pages from "@/components/pages/index.vue";

export default {
	components: {Pages},
	emits: ['success', 'closed'],
	data() {
		return {
			activeName: 'first',
			visible: false,
			tableData: [],
			searchForm: {
				type: 1,
				user_id: 0,
				limit: 10,
				page: 1
			},
			userInfo: {
				avatar: '',
				nickname: ''
			},
			orderInfo: {},
			page: {
				total: 0
			},
			copyIcon: 'el-icon-CopyDocument'
		}
	},
	mounted() {
	},
	methods: {
		//显示
		open() {
			this.visible = true;
			return this
		},
		handleClick() {
			if (this.activeName == 'first') {
				this.searchForm.type = 2
			} else {
				this.searchForm.type = 1
			}
			this.getDetail()
		},
		// 获取详情
		async getDetail() {
			let res = await this.$API.user.detail.get(this.searchForm)

			this.tableData = res.data.list.data
			this.orderInfo = res.data.orderInfo
			this.userInfo = res.data.userInfo
			this.page.total = res.data.list.total
		},
		// 表单注入数据
		setData(row) {
			this.searchForm.user_id = row.user_id

			this.getDetail()
		},
		pageChangeHandle(page) {
			this.searchForm.page = page
		},
		copyText(text) {
			navigator.clipboard.writeText(text).then(() => {
				this.$message.success('复制成功')
			}).catch(error => {
				console.log('错误', error)
				this.$message.error('复制错误')
			});
		}
	}
}
</script>

<style scoped>
.user-info {
	display: flex;

}
</style>
